<template>
    <div>
        <van-nav-bar
            :title="comment.reply_count>0? `${comment.reply_count}条回复`: '暂无回复'">
            {{}}
            <template #left>
                <van-icon name="cross" @click="$emit('close')"/>
            </template>
        </van-nav-bar>
        <div class="scroll-wrap">
            <commentItem :comment="comment"/>

            <van-cell title="回复列表"></van-cell>

            <CommentList :articleId="comment.com_id" type="c" :list="commentLists"/>
        </div>

        <div class="post-wrap">
            <van-button class="post-btn" size="small" @click="isPostShow = true">发布评论</van-button>
        </div>

        <van-popup v-model:show="isPostShow" position="bottom" :style="{ height: '30%' }">
            <commentPost :target="comment.com_id" @post-success="postSuccessResult"/>
        </van-popup>

    </div>
</template>
<script>
import commentItem from './comment-item.vue';
import CommentList from './comment-list.vue';
import commentPost from './comment-post.vue';
export default {
    props: {
        comment: {
            type: Object,
            required: true
        }
    },
    components: {
        commentItem,
        CommentList,
        commentPost
    },
    data() {
        return {
            isPostShow: false,
            commentLists:[]
        }
    },
    methods: {
        postSuccessResult(data) {
            this.comment.reply_count++;

            this.isPostShow = false

            this.commentLists.unshift(data.new_obj)
        }
    }
}
</script>
<style lang="less" scoped>
    .scroll-wrap {
        position: fixed;
        top: 46px;
        bottom: 32px;
        left: 0;
        right: 0;
        overflow-y: auto;
    }
    .post-wrap {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        border-top: 1px solid #dfdfdf;
        .post-btn {
            width: 80%;
        }
    }
</style>